1import Box from '@mui/material/Box';
  2import Container from '@mui/material/Container';
  3import {useTheme} from '@mui/material/styles';
  4import {PropsWithChildren} from 'react';
  5import pageUtils from '../../../lib/pageUtils';
  6import useEventStore from '../../../stores/useEventStore';
  7import EventLayout, {TabComponent} from '../../../layouts/Event';
  8import {
  9  EventByUuidDocument,
 10  Module,
 11  ModuleDocument,
 12  Enum_Userspermissionsuser_Lang as SupportedLocales,
 13} from '../../../generated/graphql';
 14import CarosterPlusOption from '../../../containers/CarosterPlusOption';
 15import CarosterPlusSettings from '../../../containers/CarosterPlusSettings';
 16
 17interface Props {
 18  modulesSettings?: Module;
 19  eventUUID: string;
 20  announcement?: string;
 21}
 22
 23const Page = (props: PropsWithChildren<Props>) => {
 24  return <EventLayout {...props} Tab={OptionsTab} />;
 25};
 26
 27const OptionsTab: TabComponent = ({modulesSettings}) => {
 28  const theme = useTheme();
 29  const event = useEventStore(s => s.event);
 30
 31  if (!event) return null;
 32
 33  const carosterPlusActivated =
 34    event.enabled_modules?.includes('caroster-plus');
 35
 36  return (
 37    <Box position="relative">
 38      <Container
 39        sx={{
 40          p: 4,
 41          mt: 6,
 42          mb: 11,
 43          mx: 0,
 44          [theme.breakpoints.down('md')]: {
 45            p: 2,
 46          },
 47        }}
 48      >
 49        {carosterPlusActivated && <CarosterPlusSettings event={event} />}{' '}
 50        {modulesSettings && !carosterPlusActivated && (
 51          <CarosterPlusOption event={event} modulesSettings={modulesSettings} />
 52        )}
 53      </Container>
 54    </Box>
 55  );
 56};
 57
 58export const getServerSideProps = pageUtils.getServerSideProps(
 59  async (context, apolloClient) => {
 60    const {uuid} = context.query;
 61    const {host = ''} = context.req.headers;
 62    let event = null;
 63    let modulesSettings = null;
 64
 65    // Fetch event
 66    try {
 67      const {data} = await apolloClient.query({
 68        query: EventByUuidDocument,
 69        variables: {uuid},
 70      });
 71      event = data?.eventByUUID?.data;
 72    } catch (error) {
 73      return {
 74        notFound: true,
 75      };
 76    }
 77
 78    // Fetch modules settings
 79    try {
 80      const {data} = await apolloClient.query({
 81        query: ModuleDocument,
 82        variables: {locale: context.locale},
 83      });
 84      modulesSettings = data?.module?.data?.attributes || {};
 85
 86      const {caroster_plus_description, caroster_plus_name} = modulesSettings;
 87
 88      if (
 89        caroster_plus_description &&
 90        caroster_plus_name &&
 91        String(caroster_plus_description).length === 0 &&
 92        String(caroster_plus_name).length === 0
 93      ) {
 94        console.warn(
 95          'Module settings are not set for locale: ',
 96          context.locale,
 97          ' fallback to English'
 98        );
 99        const {data: enData} = await apolloClient.query({
100          query: ModuleDocument,
101          variables: {locale: SupportedLocales['en']},
102        });
103        modulesSettings = enData?.module?.data?.attributes;
104      }
105    } catch (error) {
106      console.error(error);
107    }
108
109    return {
110      props: {
111        modulesSettings,
112        eventUUID: uuid,
113        metas: {
114          title: event?.attributes?.name || '',
115          url: `https://${host}${context.resolvedUrl}`,
116        },
117      },
118    };
119  }
120);
121export default Page;